<%@ page language="java" import="java.util.*,org.apache.struts2.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"   %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="<%=basePath %>/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath %>/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="<%=basePath %>/assets/css/page-min.css" rel="stylesheet" type="text/css" /> 
	<style type="text/css">
	 #grid,#btnSave,.row{
	 	margin-top:10px;
	 	margin-left:20px;
	 }
	 #loding{
	 	width:100%;
	 	height:100%;
	 	background:transparent;
	 	z-index:2000;
	 	text-align: center;
	 	display: none;
	 	position: absolute;
	 }
	/**内容超出 出现滚动条 **/
    .bui-stdmod-body{
      overflow-x : hidden;
      overflow-y : auto;
    }
    .h3_title{
  		padding-left:20px;
  		padding-bottom: 10px;
  	}
	</style>
</head>
<body>
    <div id="grid" ></div>
    <div id="content" class="hide">
    <h3 class="h3_title">商户登录信息</h3>
	    <form id="J_Form">
	      <input name="id" type="hidden">
	      <div class="control-group">
	        <label class="control-label"><s>*</s>帐号:</label>
	        <div class="controls">
	          <input name="name" type="text" class="input-normal" data-rules="{required : true}"  >
	        </div>
	      </div>
	      <div class="control-group">
	        <label class="control-label"><s>*</s>密码:</label>
	        <div class="controls">
	          <input id="password" name="password" type="password" class="input-normal" data-rules="{required : true}"  >
	        </div>
	      </div>
	      <div class="control-group">
	        <label class="control-label"><s>*</s>确认密码:</label>
	        <div class="controls">
	          <input type="password" class="input-normal" data-rules="{equalTo  : '#password' }"  >
	        </div>
	      </div>
	      <hr>
	      <h3 class="h3_title">商户基本资料</h3>
	      <div class="control-group">
	        <label class="control-label"><s>*</s>商户名称:</label>
	        <div class="controls">
	          <input name="merchant_name" type="text" class="input-small" data-rules="{required : true}"  >
	        </div>
	      </div>
	      <div class="control-group">
	        <label class="control-label"><s>*</s>商户地址 :</label>
	        <div class="controls">
	          <input name="merchant_address" type="text" class="input-large" data-rules="{required : true}" >
	        </div>
	      </div>
	      <div class="control-group" >
	        <label class="control-label"><s>*</s>商户负责人姓名:</label>
	        <div class="controls">
	          <input name="merchant_mgmt_name" type="text" class="input-small" data-rules="{required : true}" >
	        </div>
	      </div>
	      <div class="control-group">
	        <label class="control-label"><s>*</s>负责人手机号:</label>
	        <div class="controls">
	          <input name="merchant_mgmt_tel" type="text" class="input-small" data-rules="{required : true,mobile:true}" >
	        </div>
	      </div>
	      <div class="control-group">
	        <label class="control-label"><s>*</s>商户Logo:</label>
	        <div class="controls">
	          	<input id="merchant_logo" type="hidden" name="merchant_logo" value=""  data-rules="{required : true}" data-messages="{required:'请上传图片'}">
		      	<div id="J_Uploader">
	        </div>
	      	</div>
	      </div>
	      <div id="bottom"></div>
	    </form>
    </div>
</body>
	<script type="text/javascript" src="<%=basePath %>/assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/bui.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/config.js"></script>
    <script type="text/javascript">
    
    	//设定BUI视图变量
    	var Grid = BUI.Grid;
    	//设定BUI数据变量
        var Data = BUI.Data;
        //获取数据
        var Store = Data.Store;
        //定义columns并且初始化
        var columns = [
          //table columns
          {title : '商户名称',dataIndex :'merchant_name',elCls : 'center',width:'20%'},
          {title : '登录帐号',dataIndex :'name',elCls : 'center',width:'20%'},
          {title : '登录密码',dataIndex :'password',elCls : 'center',width:'20%'},
          {title : '注册时间',dataIndex :'reg_date',elCls : 'center',width:'20%'},
          {title : '商户LOGO',dataIndex :'merchant_logo',width:'20%',elCls : 'center',renderer : function(value){
                  return '<a class="hover-view-img" title="'+value+'" >显示图片</a>';
                }},
		  {title : '操作',elCls : 'center',width:'20%',renderer : function(){
		    return '<span class="grid-command btn-edit">编辑</span><a href="#" class="btn-del" style="color:red;">删除</a>';
		  }}
        ];
        
        //定义store并且通过AJAX获取数据
        var store = new Store({
        	//AJAX 提交路劲
            url : '<%=basePath %>/Json/Merchant',
            //自动加载数据
            autoLoad:true,
            //从第0个元素开始获取信息 
            start:0,
            //配置分页数目,后台相当于limit参数
            pageSize:15
            
          });
          
		//定义编辑器并且设定自定义按钮
		var editing = new Grid.Plugins.DialogEditing({
		 	//设置隐藏的Dialog内容
            contentId : 'content',
            //触发显示Dialog的样式
            triggerCls : 'btn-edit',
            //编辑器 
            editor : {
              width:'90%',
              height:390,
              elCls : 'editor',
              //编辑器标题
              title : '内容编辑',
              //设置自定义按钮
              buttons : [
              	//确定按钮
              	{
              		text:'确定',
              		elCls : 'button button-primary',
              		handler : function(){
						//实现ajax数据提交
						$.ajax({
							type:"post",
							dataType:"json",
							data:{
								'id':editing.get('form').getFieldValue('id'),
								'name':editing.get('form').getFieldValue('name'),
								'password':editing.get('form').getFieldValue('password'),
								'merchant_name':editing.get('form').getFieldValue('merchant_name'),
								'merchant_address':editing.get('form').getFieldValue('merchant_address'),
								'merchant_mgmt_name':editing.get('form').getFieldValue('merchant_mgmt_name'),
								'merchant_mgmt_tel':editing.get('form').getFieldValue('merchant_mgmt_tel'),
								'merchant_logo':$("#merchant_logo").attr("value"),
							},
							url:"<%=basePath %>/Merchant_JEdit",
							beforeSend: function(XMLHttpRequest){
								//显示稍等
								$("#loding").css("display","block");
							},
							success: function(data){
								//成功并且收到信息
								if(data==1){
									$("#loding").css("display","none");
									//隐藏稍等窗口
									BUI.Message.Alert('恭喜您,编辑成功!',function(){
										refreshFunction();
									},'success');
									//刷新
								}else{
									$("#loding").css("display","none");
									//隐藏稍等窗口
									BUI.Message.Alert('编辑失败，请重试！',function(){
										refreshFunction();
									},'error');
								}
							},
							error: function(status){
								if (status == "timeout")
				                {
				                	$("#loding").css("display","none");
				                	BUI.Message.Alert('请求超时，请重试!',function(){
										refreshFunction();
									},'error');
				                }else{
				                	$("#loding").css("display","none");
				                	//如果出别的错
									BUI.Message.Alert('系统错误，请跟管理员联系！',function(){
										refreshFunction();
									},'error');
				              	}
							}
						});
						//消失弹出窗口
						this.hide();
              		},
              	},
              	//取消按钮
              	{
              		text:'取消',
              		elCls : 'button',
              		handler : function(){
              			this.hide();
              		}
              	}
              ]
            }
          });

		//把每个行的内容隐藏起来点击后显示功能
		var cascade = new Grid.Plugins.Cascade({
  		    renderer : function(record){
  		    	var res="<div><p style='padding-left:40px;'>商户ID : "+record.id+"</p>";
  		    	res+="<p style='padding-left:40px;'>商户名称 : "+ record.merchant_name+"</p>";
  		    	res+="<hr><p style='padding-left:40px;'>商户负责人 : "+ record.merchant_mgmt_name+"</p>";
  		    	res+="<p style='padding-left:40px;'>商户负责人手机号 : "+ record.merchant_mgmt_tel+"</p>";
  		    	res+="<p style='padding-left:40px;'>商户地址 : "+ record.merchant_address+"</p></div>";
  			    return res;
  		    }
        });

        //定义视图并且设置视图配置
        var grid = new Grid.Grid({
        	//显示div的id
            render:'#grid',
            //宽度
            width:'99.7%',
            //加载columns
            columns : columns,
            //加载数据时显示屏蔽层
            loadMask: true, 
            //加载store
            store: store,
            //给grid加载CheckSelection和编辑器
            plugins : [Grid.Plugins.RowNumber,editing,cascade],
            // 底部工具栏
            bbar:{
                // pagingBar:表明包含分页栏
                pagingBar:true,
            },
            // 顶部工具栏
            tbar:{
		      items : [
		      	//添加刷新按钮
		      	{
			        btnCls : 'button button-small',
			        text : '<i class="icon-refresh" tyle="color:blue"></i>刷新',
			        listeners : {
			          'click' : refreshFunction
			        }
		      	}
		      ]
		    }
        });
        
        //item点击事件
        grid.on('itemclick',function(ev){
	        var sender = $(ev.domTarget);
	        //获取点击的item
	        var item = ev.item;
	        //点击删除操作
	        if(sender.hasClass('btn-del')){
	        	//执行删除函数
	        	delFunction(item);
	        }else if(sender.hasClass('btn-edit')){
	        	//初始化上传函数
				editUpload(item);
	        }
        });  
          
        //加载grid
        grid.render();
        
        //上传文件
        var queue = null;
       	BUI.use('bui/uploader',function (Uploader) {
       		
       		  //带图片预览的主题
			  Uploader.Theme.addTheme('mytheme', {
			    elCls: 'imageViewTheme',
			    queue:{
			      resultTpl: {
			          'default': '<div class="default">{name}</div>',
			          'success': '<div data-url="{url}" class="success_url"><img src="<%=basePath%>{url}" title="{name}" style="width:100%;height:100%;"></div>',
			          'error': '<div class="error"><span title="{name}">{msg}</span></div>',
			          'progress': '<div class="progress"><div class="bar" style="width:{loadedPercent}%"></div></div>'
			      }
			    }
			  });
       		
		     var uploader = new Uploader.Uploader({
		       render: '#J_Uploader',
		       url: '<%=basePath%>/Merchant_JUpload',
		       //指定使用主题
        	   theme: 'mytheme',
		       rules: {
		         //文的类型
		         ext: ['.png,.jpg','文件类型只能为{0}'],
		         //上传的最大个数
		         max: [1, '文件的最大个数不能超过{0}个'],
		         //文件大小的最小值,这个单位是kb
		         minSize: [0, '文件的大小不能小于{0}KB'],
		         //文件大小的最大值,单位也是kb
		         maxSize: [1024, '文件大小不能大于1M']
		       },
		       multiple:false,
		       isSuccess: function(res){
		       		$("#merchant_logo").attr("value",res.url);
		       		return true;
		       }
		      }).render();
		      queue = uploader.get('queue');
	    });
	   
		BUI.use('bui/tooltip',function (Tooltip) {
			var tips = new Tooltip.Tips({
	        	tip : {
		          trigger : '.hover-view-img', //出现此样式的元素显示tip
		          alignType : 'bottom-left', //默认方向
		          titleTpl : '<img src="<%=basePath %>/{title}">',
		          offset : 10 //距离左边的距离
		        }
		      });
	      tips.render();
		});
        
        //编辑以上传的图片
        function editUpload(item){
        	var list = new Array();
         	//设置文件的回显   
       		var temp = {
       			success: true,
       			name: item.merchant_logo,
       			url: item.merchant_logo,
       			ext:'.jpg'
       		};
       		list.push(temp);
         	queue.setItems(list);
        }
        
        //删除函数
        function delFunction(item){
        	BUI.Message.Confirm('你确定删除此数据吗?',function(){
          		setTimeout(function(){
          			//实现ajax数据提交
						$.ajax({
							type:"post",
							dataType:"json",
							data:{
								'id':item.id,
							},
							url:"<%=basePath %>/Merchant_JDelete",
							beforeSend: function(XMLHttpRequest){
								//显示稍等
								$("#loding").css("display","block");
							},
							success: function(data){
								//成功并且收到信息
								if(data==1){
									$("#loding").css("display","none");
									//隐藏稍等窗口
									BUI.Message.Alert('恭喜您,编辑成功!',function(){
										refreshFunction();
									},'success');
								}else{
									$("#loding").css("display","none");
									//隐藏稍等窗口
									BUI.Message.Alert('删除失败，请重试!',function(){
										refreshFunction();
									},'error');
								}
							},
							error: function(status){
								if (status == "timeout")
				                {
				                	$("#loding").css("display","none");
				                    BUI.Message.Alert('请求超时，请重试!',function(){
										refreshFunction();
									},'error');
				                }else{
				                	$("#loding").css("display","none");
				                	//如果出别的错
									BUI.Message.Alert('系统错误，请跟管理员联系！',function(){
										refreshFunction();
									},'error');
				              	}
							}
						});
          		});
        	},'question');
        }
        //刷新函数
        function refreshFunction(){
        	location.reload();
        }
    </script>
</html>
